<style lang="scss" scoped>
.homesearch {
    background: #f9f9f9;
}

header {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;

    input {
        width: 80%;
        height: 30px;
        border-radius: 15px;
        border: 1px solid #19e129;
        font-weight: normal;
    }
}

.doctor {
    width: 95%;
    margin: auto;
    background: white;

    h4 {
        padding: 10px 0 0 10px;
    }

    .doctorlist {
        padding: 20px 10px;
        border-bottom: 1px solid #ededed;


        .top {
            display: flex;

            .left {
                width: 50px;
                margin: 0 5px;

                img {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    border: 1.5px solid #44d477;
                }
            }

            .right {
                margin: 0;
                line-height: 20px;

                .right-top {
                    display: flex;
                    margin: 5px 0;

                    span {
                        margin: 0;
                    }

                    .border::after {
                        display: block;
                        width: 10px;
                        text-align: center;
                        height: 10px;
                        margin-top: 5px;
                        border-right: 1px solid #ccc;
                        content: "";
                    }

                    .title {
                        margin-left: 8px;
                        font-size: 14px;
                    }

                    .tag {
                        margin-left: 5px;
                        font-size: 13px;
                        padding: 1px 2px;
                        background: #e4eef4;
                        color: rgb(44, 116, 224);
                    }
                }

                .right-bottom {
                    span {
                        margin: 0 3px;
                    }

                    .city {
                        color: rgb(20, 187, 5);
                    }

                    .hospital {
                        font-size: 14px;
                    }

                    .type {
                        background: #1cc381;
                        color: white;
                        font-size: 14px;
                        padding: 1px 3px;
                        border-radius: 3px;
                    }

                    .tagname {
                        font-size: 13px;
                        background-color: rgba(244, 226, 184, 0.849);
                        color: rgba(147, 106, 9, 0.849);
                    }
                }
            }
        }

        .middle {
            margin: 10px 0;

            div {
                width: 95%;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            p {
                margin: 10px;

                span {
                    color: #999;
                    font-size: 14px;
                    margin-right: 20px;
                }

                .xing {
                    color: #6c6b6b;

                    img {
                        width: 14px;
                        height: 14px;
                    }
                }

                .num {
                    span {
                        color: #6c6b6b;
                    }
                }
            }
        }

        .bottom {
            width: 95%;

            span {
                padding: 5px;
                border: 1px solid #44d477;
                border-radius: 15px;
                color: #44d477;
                font-size: 14px;
                margin-right: 5px;
            }
        }
    }
}

.question {
    padding: 10px;
    .questionlist {
        margin: auto;
        p {
            width: 95%;
            font-size: 14px;
            margin: 10px 0;
            color: #333;

            span {
                padding: 2px;
                background: #f4b300;
                color: white;
                border-radius: 3px;
            }
        }
        >div{
            border-radius: 10px;
            background: #ececec;
            padding: 10px;
            .top{
                line-height: 20px;
                font-size: 14px;
                img{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                }
            }
            .bottom{
                font-size: 13px;
                color: #999;
            }
        }
    }
}
</style>

<template>
    <div class="homesearch">
        <header>
            <input type="text">
        </header>
        <van-tabs color="#19e129" title-active-color="#19e129" v-model:active="active" scrollspy sticky>
            <van-tab title="全部" title-style="font-weight: normal;">

            </van-tab>
            <van-tab title="医生" title-style="font-weight: normal;" class="doctor">
                <h4>医生推荐</h4>
                <div v-for="(item, index) in doctor" class="doctorlist">
                    <div class="top">
                        <div class="left">
                            <img :src="item.img" alt="">
                        </div>
                        <div class="right">
                            <p class="right-top">
                                <span class="name">{{ item.name }}</span>
                                <span class="border"></span>
                                <span class="title">
                                    {{ item.title }}
                                    {{ item.clinic_name }}
                                </span>
                                <span class="tag" v-if="item.tag1 != ''">
                                    {{ item.tag1 }}
                                </span>
                                <span v-else>

                                </span>
                            </p>
                            <p class="right-bottom">
                                <span class="hospital">
                                    {{ item.hospital }}
                                </span>
                                <span class="type" v-if="item.tag2 != ''">
                                    {{ item.tag2 }}
                                </span>
                                <span v-else>

                                </span>
                                <span class="tagname" v-if="item.tag3 != ''">
                                    {{ item.tag3 }}
                                </span>
                                <span v-else>

                                </span>
                            </p>
                        </div>
                    </div>
                    <div class="middle">
                        <div>擅长:{{ item.desc }}</div>
                        <p>
                            <span class="xing">
                                好评
                                {{ item.descrip }}
                                <img :src="item.descrip_icon" alt="">
                            </span>
                            <span class="num">
                                {{ item.descrip2 }}
                                <span>
                                    {{ item.descrip_num }}
                                </span>
                            </span>
                            <span class="num">
                                {{ item.descrip3 }}
                                <span>{{ item.descrip3_num }}</span>
                            </span>
                        </p>
                    </div>
                    <div class="bottom">
                        <span>
                            {{ item.service_type_verbose }}
                            ￥{{ item.price }}
                        </span>
                        <span>
                            电话
                            ￥178
                        </span>
                        <span>
                            视频
                            ￥198
                        </span>
                    </div>
                </div>
            </van-tab>
            <van-tab title="相似问题" title-style="font-weight: normal;" class="question">
                <h4>相似问题</h4>
                <div v-for="(item, index) in question" :key="index" class="questionlist">
                    <p>
                        <span>问</span>
                        宝宝支气管炎，吃药中，今天第二天(男,18月)
                    </p>
                    <div>
                        <div class="top">
                            <img :src="item.img" alt="">
                            {{ item.name }}
                            {{ item.title }}
                            {{ item.hospital }}
                        </div>
                        <div class="bottom">
                            {{ item.desc }}
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="商品" title-style="font-weight: normal;">
                内容
            </van-tab>
            <van-tab title="专家科普" title-style="font-weight: normal;">
                内容
            </van-tab>
            <van-tab title="健康热点" title-style="font-weight: normal;">
                内容
            </van-tab>
            <van-tab title="医院" title-style="font-weight: normal;">
                内容
            </van-tab>
        </van-tabs>

    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from '../../http/axios';
const active = ref(0)
const doctor = ref([])
const question = ref([])

onMounted(async () => {
    let res = await axios.get('/chunyu/doctorlist')
    console.log(res.data.data.slice(0, 5));
    doctor.value = res.data.data.slice(0, 5)
    question.value = res.data.data.slice(0, 3)
})
</script>